<template>
    <div class="communication-dialog">
        <div
                @click="openCommunication(index)"
                class="communication-dialog-list"
                :class="{'communication-dialog-list-checked':initIndex === index}"
                v-for="(item, index) in commList"
                :key="index"
        >
            <img :src="item.image">
            <div v-if="Number(group)===1" class="list-right">
                <div class="list-right-top" :class="{'list-right-top-1':Number(group)===1}">
                    <el-popover placement="top-start"
                                trigger="hover"
                                :disabled="$pop.getEllipsis(item.name,6)===item.name"
                    >
                        <div>{{item.name}}</div>
                        <div slot="reference" class="top-name">{{$pop.getEllipsis(item.name,6)}}</div>
                    </el-popover>
                    <span>{{item.time}}</span>
                </div>
                <div>{{item.company}}</div>
                <div v-if="Number(group)===2">{{item.jobName}}</div>
            </div>
            <div v-if="Number(group)===2" class="list-right">
                <div class="list-right-top" :class="{'list-right-top-2':Number(group)===2}">
                    <!--hr姓名-->
                    <el-popover placement="top-start"
                                trigger="hover"
                                :disabled="$pop.getEllipsis(item.name,7)===item.name"
                                class="top-name"
                    >
                        <div>{{item.name}}</div>
                        <div slot="reference" class="top-name">{{$pop.getEllipsis(item.name,7)}}</div>
                    </el-popover>
                    <!--企业名称-->
                    <el-popover placement="top-start"
                                trigger="hover"
                                class="company-name"
                    >
                        <div>{{item.company}}</div>
                        <div slot="reference" class="company-name">{{item.company}}</div>
                    </el-popover>

                </div>
                <div class="list-right-bottom">
                    <div v-if="Number(group)===2">职位：{{$pop.getEllipsis(item.jobName,6)}}</div>
                    <span>{{item.time}}</span>
                </div>
            </div>
            <div v-if="item.unread>0" class="unread_box_cls"><p class="unread_cls">{{item.unread}}</p></div>
        </div>
    </div>
</template>

<script>
  export default {
    props: {
      commList: {
        type: Array,
        default() {
          return []
        }
      },
      initIndex: {
        type: Number,
        default: -1
      },
      group: {
        type: String,
        default: ''
      }
    },
    watch: {
      commList: {
        immediate: true,
        handler(n) {
          console.log('new list', n)
        }
      }
    },
    data() {
      return {}
    },
    methods: {
      openCommunication(index) {
        //点击展开相关的页面
        this.$emit('on-active', index)
      }
    },
    components: {}
  }
</script>

<style lang="scss" scoped>

</style>
